<template>
  <div >
    <el-popover
      className="select-multiple"
      :width="width"
      trigger="click">
      <div>
        <div style="display: flex;justify-content: space-between;align-items: center">
          <el-button type="text"  @click="handleCheckAllChange">全选</el-button>
          <el-button type="text" @click="handleCheckClearChange">清空</el-button>
        </div>
        <div>
          <el-input  size="small"  placeholder="请输入内容"  @input="selectGroup" v-model="inputValue"   class="input-with-select">
            <el-button  size="small" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div style="height: 300px;overflow-y: auto;padding-top: 15px">
<!--          <el-checkbox-group class="group-checkbox" v-model="selectValue">-->
<!--            <el-checkbox v-for="item in dataList" :label="item"  :key="item"></el-checkbox>-->
<!--          </el-checkbox-group>-->
          <el-tree
            :data="dataList"
            show-checkbox
            default-expand-all
            :node-key="nodekey"
            ref="tree"
            highlight-current
            :props="defaultProps"
            @check-change="getTreeValue"
          >
          </el-tree>
        </div>
      </div>
      <div  @click="getList"  slot="reference"  style="    width: 100%;">
        <div style="width: 100%;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;    border-radius: 4px;
    border: 1px solid #DCDFE6;min-height: 32px;margin-top: 4px;max-height: 100px;">
          <div  style=" padding: 5px 3px;background: #f4f4f5;    margin: 2px 0 2px 6px;color: #909399;border-radius: 4px;height: 24px;
    padding: 0 8px;
    line-height: 22px;  " v-for="item in selectValue" :key="item.id">{{item.name}}
            <i style="background-color: #c0c4cc;
            border-radius: 50%;
    text-align: center;
    position: relative;
    cursor: pointer;
    font-size: 12px;
    height: 16px;
    width: 16px;
    line-height: 16px;
    vertical-align: middle;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    display: inline-block;
    -webkit-font-smoothing: antialiased;    margin-top: -2px;
    top: -1px;
    right: -5px;    transform: scale(.8);
    color: #909399;" class="el-tag__close el-icon-close" @click="onDelete(item)"></i>
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
export { default } from './Index'
</script>

<style lang='scss'>
@import url(index.scss);
.el-tag__close:hover{
  color: #fff !important;
}
</style>
